import React, { useState, useRef } from 'react';
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import IconSvg from '@/components/IconSvg'; // 引入svg图标组件
import icons from "./requireIcons";
import * as style from './style.js'

const menuSelectIconItemActive = {
    background: '#eee',
    borderRadius: '4px'
}

const menuSelectIconItem = {}

export const SelectIcon = (props) => {
    const {onSelectedIcon} = props
    const [iconList, setIconList] = useState(icons)
    // 搜索过滤
    const changeIcon = (e) => {
        let newValue = e.target.value
        let currentIcons = JSON.parse(JSON.stringify(icons))
        if (newValue) {
            const icon = currentIcons.filter(item => item.includes(newValue))
            setIconList(icon);
        } else {
            setIconList(icons);
        }
    }
    const [currentIconName, setCurrentIconName] = useState('')
    // 选中
    const selectedIcon = (item) => {
        setCurrentIconName(item)
        onSelectedIcon(item)
        document.body.click();
    }
    return (
        <style.MenuSelectIcon>
            <Input placeholder="请输入图标名称" prefix={<SearchOutlined />} onChange={e => changeIcon(e)} />
            <div className="menuSelectIconList">
                {
                    iconList.map((item, index) => {
                        return (
                            <div className="menuSelectIconItem" style={currentIconName === item ? menuSelectIconItemActive : menuSelectIconItem} key={index} onClick={e => selectedIcon(item)}>
                                <IconSvg name={item} style={{ height: '25px', width: '16px', marginRight: '5px' }} />
                                <span className='menuSelectIconSpan'>{item}</span>
                            </div>
                        )
                    })
                }
            </div>
        </style.MenuSelectIcon>
    )
}

export default SelectIcon